<!-- 文件描述: 管理员列表页面 -->
<!-- 作者: 苏宇浩 -->
<!-- 时间: 2021/12/08 -->
<template>
  <div class="platform-num-setting">
    <!-- 头部 -->
    <header>
      <Input v-model="value" placeholder="用户名称/邮箱即时搜索" style="width: 300px" />
    </header>
    <!-- 表格 -->
    <div class="table-box">
      <s-table :columns="TableHead" :data="TableData">
        <div slot="action" slot-scope="{ row, column , index }">
          <Button type="text" size="small" @click="lookBox">查看</Button>
        </div>
      </s-table>
    </div>
    <!-- 分页器 -->
    <footer class="footer">
      <s-page @pageChagne='pageChagne'></s-Page>
    </footer>
    <!-- 弹出框 -->
    <s-popup-box :visible='visible' @cancel='cancel'>
      <p>员工名称:张三</p>
      <p>角色名称:运营专员</p>
      <s-table :columns="TableHead2" :data="TableData" height='300px'>
      </s-table>
    </s-popup-box>
  </div>
</template>

<script>
import STable from "@/components/syh/s-Table/s-Table.vue";
import SPage from "@/components/syh/s-Page/s-Page.vue";
import SPopupBox from "@/components/syh/s-PopupBox/s-PopupBox.vue";
import { getProjectList } from "@/apis/projectManagement/projectList";
const TableHead = [
  {
    type: "index",
    width: 80,
    align: "center",
    title: "编号",
  },
  {
    title: "用户名称",
    key: "name",
  },
  {
    title: "用户邮箱",
    key: "age",
  },
  {
    title: "角色",
    key: "address",
  },
  {
    title: "创建时间",
    key: "address",
  },
  {
    title: "操作",
    slot: "action",
    width: 150,
    align: "center",
  },
];
const TableHead2 = [
  {
    title: "页面名称",
    key: "name",
  },
  {
    title: "页面权限",
    key: "name",
  },
];
export default {
  name: "projectList",
  data() {
    return {
      TableHead: TableHead,
      TableData: [],
      TableHead2:TableHead2,
      loading: false,
      value: "",
      visible: false,
    };
  },
  components: {
    STable,
    SPage,
    SPopupBox,
  },
  created() {
    this.getProjectList();
  },
  mounted() {},

  methods: {
    /**
     * @description 获取项目列表
     * @param
     */
    async getProjectList() {
      let { body, code } = await getProjectList();
      if (code == 200) {
        this.TableData = body;
      }
    },
    remove(index) {},
    // 分页器
    pageChagne(val) {
      console.log("分页器", val);
    },
    /**
     * @description 跳转详情页
     */
    skitAddProject(key) {},
    /**
     * @description
     * @param
     */
    lookBox() {
      this.visible = true;
    },
    /**
     * @description
     * @param
     */
    cancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.platform-num-setting {
  height: 84vh;
  overflow: hidden;
  background: #fff;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.table-box {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.new-add-btn {
  width: 80px;
  height: 32px;
  background: #5272e2;
  border-radius: 2px;
  color: #fff;
  border: none;
  cursor: pointer;
}
.footer {
  margin-top: 24px;
}
.module-btn {
  display: flex;
  justify-content: center;
}
</style>